<template>
  <dv-charts :option="option" style="width: 100%; height: 100px" />
</template>

<script setup>
import { ref } from "vue";

const { value, title, color } = defineProps({
  value: {
    type: Number,
  },
  title: {
    type: String,
  },
  color: {
    type: Array,
  },
});

const option = ref({
  title: {
    text: title,
    style: {
      fill: "#fff",
      fontSize: 10,
      fontWeight: 400,
    },
  },
  series: [
    {
      type: "gauge",
      startAngle: -Math.PI / 2,
      endAngle: Math.PI * 1.5,
      arcLineWidth: 5, //线条宽度
      data: [{ name: "itemA", value: value, gradient: color }],
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      pointer: {
        show: false,
      },
      dataItemStyle: {
        lineCap: "round",
      },
      details: {
        show: true,
        formatter: "{value}%",
        style: {
          fill: "#1ed3e5",
          fontSize: 15,
        },
      },
    },
  ],
});
</script>

<style lang="scss" scoped></style>
